<template>
	<view>
		<view class="container">
			<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" style-type="jiaofei"
			 :active-color="actcolor"></uni-segmented-control>
			<view class="content">
				<view v-show="current === 0">
					<scroll-view class="gopay_view" scroll-y="true">
						<view class="tip_box_data" v-if="listData && listData[0]" v-for="(item,index) in listData" :key="item.type">
							<view class="check-box">
								<view>
									<checkbox :disabled="item.money == 0" @tap="checkboxChange" class="active" :data-money="item.money"
									 :data-value="index.toString()" :checked="item.checked && item.money != 0" :data-type="item.type" :key="item.type" />
								</view>
							</view>
							<view class="bigbox" @tap="gonewpaymentdetailds(item.type,item.bind_id, item.money)">
								<view class="contentbox">
									<view class="text">{{item.name}}</view>
									<view class="title" v-if="item.type != 'new_park'">{{item.text}}</view>
								</view>
								<view class="textnum">
									<view class="num">￥{{item.money}}</view>
									<view class="right-icon">
										<image src="../../../static/images/right.png" class="right-img"></image>
									</view>
								</view>
							</view>
						</view>
						<div class='tip_box_no_data' v-if="!listData[0]">
							<image class="no_data_img" src="https://hf.pigcms.com/static/images/house/no_data.png"></image>
							<div class='no_tip_content'>
								<lang keywords="暂无账单~"></lang>
							</div>
						</div>
					</scroll-view>
				</view>
				<view v-show="current === 1">
					<!-- 顶部选项卡 -->
					<scroll-view id="nav-bar" class="nav-bar" scroll-x scroll-with-animation :scroll-left="scrollLeft">
						<view v-for="(item,index) in tabBars" :key="index" class="nav-item" :class="{current: index === tabCurrentIndex}"
						 :id="'tab'+index" :data-type="item.type" :data-index="index" @tap="changeTabs">{{item.name}}</view>
					</scroll-view>
					<swiper id="swiper" class="paid_swiper" :duration="300" :current="tabCurrentIndex" @change="changeTab">
						<swiper-item v-for="(item,index) in tabBars" :key="index">
							<scroll-view class="panel-scroll-box" :scroll-y="enableScroll">
								<view class="cardbox" v-if="oldpaylist && oldpaylist[0]" v-for="(items,indexs) in oldpaylist" :key="indexs"
								 :data-order_id="items.order_id" @tap="gopayMentdetailds">
									<view class="leftbox">
										<view class="text">{{items.order_name}}</view>
										<view class="title">缴费时间：{{items.time}}</view>
									</view>
									<view class="textnum">
										<view class="num" style="color: #000000;">￥{{items.money}}</view>
										<view class="right-icon">
											<image src="../../../static/images/right.png" class="right-img"></image>
										</view>
									</view>
								</view>
								<div class='tip_box_no_data' v-if="!oldpaylist[0]">
									<image class="no_data_img" src="https://hf.pigcms.com/static/images/house/no_data.png"></image>
									<div class='no_tip_content'>
										<lang keywords="暂无账单~"></lang>
									</div>
								</div>
							</scroll-view>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<view class="pay-bottom" v-show="current === 0">
				<checkbox-group @change="Changeall">
					<view class="check-box1" style="margin-left: 30rpx;">
						<label class="uni-list-cell uni-list-cell-pd">
							<view>
								<checkbox :value="all" :checked="ischeckeds" />
							</view>
						</label>
					</view>
				</checkbox-group>
				<view class="paybox">
					<view class="payminbox">
						<view class="allpay">全选</view>
						<view class="allpaynum">合计：￥{{moneyall}}</view>
					</view>
					<view class="gopay" :style="'background:' + actcolor" @tap="goallpay">去支付</view>
				</view>
			</view>
			<view class="independent_payment" v-if="has_custom_pay" v-show="current === 0" @tap="goindependent">
				<image src="../../../static/images/independent.png" class="independent-img"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import uniPopup from '../../../appComponent/uni/uni-popup/uni-popup.vue';
	import uniSegmentedControl from "../../../appComponent/uni/uni-segmented-control/uni-segmented-control.vue"
	var common = require('../../../utils/common.js');
	var app = getApp();
	var _this;
	let windowWidth = 0,
		scrollTimer = false,
		tabBar;
	const getpayMentlist = () => {
		common.post('HouseApi&a=village_my_pay', {
			village_id: _this.village_id,
			pigcms_id: _this.pigcms_id,
		}, data => {
			console.log('+++++++++++++', data)
			_this.has_custom_pay = data.has_custom_pay;
			_this.listData = data.pay_list;
			_this.itemdata = data.pay_list;
			_this.$forceUpdate();
			var check_pay = [];
			for (var i in data.pay_list) {
				const moneys = data.pay_list[i].money;
				console.log("00000", _this.moneys)
				if (moneys == 0) {
					if (data.pay_list[i].type == 'property') {
						data.pay_list[i].text = '暂无欠费账单，点击前往预存物业费'
					} else {
						data.pay_list[i].text = '暂无账单'
					}
				} else {
					data.pay_list[i].text = '点击查看账单详情'
				};
				if (data.pay_list[i] && data.pay_list[i]['money'] > 0) {
					check_pay.push(data.pay_list[i]);
				}
			}
			_this.allpost = check_pay;
			console.log("allpost", _this.allpost)

			_this.listData.forEach(item => {
				if (item.money == 0) {
					item.checked = false;
				} else {
					item.checked = true;
				}
				return item
			});
			if (_this.moneyall == 0) {
				_this.ischeckeds = false
			} else {
				_this.ischeckeds = true
			}
			_this.getterMoney()
		});
	};
	const getpayMenthead = () => {
		common.post('HouseApi&a=village_my_paylist', {
			village_id: _this.village_id,
			pigcms_id: _this.pigcms_id,
		}, data => {
			console.log('+++++++++++++', data)
			_this.tabBars = data.pay_type_list
		});
	};
	const getoldpayMentlist = () => {
		common.post('HouseApi&a=village_my_pay_list', {
			village_id: _this.village_id,
			pigcms_id: _this.pigcms_id,
			order_type: _this.type,
			page: 1,
		}, data => {
			console.log('+++++++++++++', data)
			_this.oldpaylist = data.order_list
		});
	};
	const getgoallpay = () => {
		console.log("77777777777777777", _this.allpost)
		common.post('HouseApi&a=all_go_pay', {
			village_id: _this.village_id,
			pigcms_id: _this.pigcms_id,
			order_type: _this.type,
			money: _this.moneyall,
			all_post: _this.allpost,
		}, data => {
			console.log('+++++++++++++', data)
			common.parseUrl(data.order_url)
		});
	};
	export default {
		data() {
			return {
				items: [],
				itemdata: [],
				current: 0,
				listData: [],
				village_id: 0,
				pigcms_id: 0,
				actcolor: '',
				ischecked: true,
				ischeckeds: true,
				all: 'all',
				moneyall: 0,
				oldpaylist: [],
				text: '',
				tabCurrentIndex: 0, //当前选项卡索引
				scrollLeft: 0, //顶部选项卡左滑距离
				enableScroll: true,
				tabBars: [],
				allpost: [],
				has_custom_pay: '',
			}
		},
		onShow() {
			// #ifdef H5
			common.hideWxShare()
			// #endif

		},
		onLoad(options) {
			windowWidth = uni.getSystemInfoSync().windowWidth;
			_this = this;
			console.log("options", options)
			_this.current = options.current;
			console.log("_this.current", _this.current)
			if (_this.current) {
				_this.current = options.current
			} else {
				_this.current = 0
			};
			_this.items = ["待缴费", "已缴费"];
			// #ifdef H5
			console.log('准备跳小程序页', _this);
			common.webToMiniapp(_this.route, options, 'redirect')
			// #endif

			common.setMainColor(_this, function(config) {
				_this.actcolor = config.config.mobile_head_color

				const res = uni.getStorageSync('village_key');
				if (res) {
					_this.village_id = res.village_id;
					_this.pigcms_id = res.pigcms_id;
					_this.village_name = res.village_name;
				};

				if (!app.globalData.is_login || !_this.pigcms_id || _this.pigcms_id == 0) {
					if (common.checkIsFooterPage("/pages/village_menu/my")) {
						wx.switchTab({
							url: "/pages/village_menu/my"
						});
					} else {
						wx.redirectTo({
							url: '/pages/village_menu/my',
						})
					}
					return false;
				}

				getpayMentlist();
				getoldpayMentlist();
				_this.loadTabbars();
			});
		},
		methods: {
			checkboxChange(e) {
				console.log("rrrrrrrrrrrrr", e);
				var type = e.target.dataset.type;
				var money = e.target.dataset.money;
				console.log("money", money)
				console.log("type", type)
				console.log('listData', _this.listData)
				if (money == 0) return
				const currentIndex = _this.listData.findIndex((item) => item.type === type);
				console.log("currentIndex", currentIndex)
				if (currentIndex < 0) return;
				_this.listData[currentIndex] = {
					..._this.listData[currentIndex],
					checked: !_this.listData[currentIndex].checked,
				}
				_this.getterMoney() // 这个要多个地方调用所以不太好

				_this.allpost = _this.listData.filter((item) => {
					return item.checked === true
				})
				console.log('_listData', _this.allpost)
				_this.ischeckeds = _this.listData.every(item => item.checked === true);
			},
			getterMoney() {
				_this.moneyall = _this.listData.reduce((pre, item) => {
					if (!item.checked || !item.money) {
						return pre
					} else {
						return pre += item.money
					}
				}, 0)
			},
			Changeall(e) {
				_this.ischeckeds = !_this.ischeckeds
				for (var i in _this.listData) {
					const item = _this.listData[i];
					_this.$set(item, 'checked', _this.ischeckeds);
				}
				_this.getterMoney()
				_this.$forceUpdate();
			},
			onClickItem(index) {
				if (_this.current !== index) {
					_this.current = index;

				}
			},
			setEnableScroll(enable) {
				if (this.enableScroll !== enable) {
					this.enableScroll = enable;
				}
			},
			async changeTabs(e) {
				var index = e.currentTarget.dataset.index
				_this.type = e.currentTarget.dataset.type
				//getoldpayMentlist()
				this.tabCurrentIndex = index;
			},
			async changeTab(e) {
				_this.oldpaylist = []
				if (scrollTimer) {
					//多次切换只执行最后一次
					clearTimeout(scrollTimer);
					scrollTimer = false;
				}

				let index = e;
				//e=number为点击切换，e=object为swiper滑动切换
				if (typeof e === 'object') {
					index = e.detail.current
				}
				if (typeof tabBar !== 'object') {
					tabBar = await this.getElSize("nav-bar")
				}
				//计算宽度相关
				let tabBarScrollLeft = tabBar.scrollLeft;
				let width = 0;
				let nowWidth = 0;
				//获取可滑动总宽度
				for (let i = 0; i <= index; i++) {
					let result = await this.getElSize('tab' + i);
					width += result.width;
					if (i === index) {
						nowWidth = result.width;
					}
				}
				//延迟300ms,等待swiper动画结束再修改tabbar
				scrollTimer = setTimeout(() => {
					if (width - nowWidth / 2 > windowWidth / 2) {
						//如果当前项越过中心点，将其放在屏幕中心
						this.scrollLeft = width - nowWidth / 2 - windowWidth / 2;
					} else {
						this.scrollLeft = 0;
					}
					if (typeof e === 'object') {
						this.tabCurrentIndex = index;
						console.log(e)
					}
					_this.type = _this.tabBars[index].type
					getoldpayMentlist()
					this.tabCurrentIndex = index;

				}, 300)

			},
			getElSize(id) {
				return new Promise((res, rej) => {
					let el = uni.createSelectorQuery().select('#' + id);
					console.log("2222", el)
					el.fields({
						size: true,
						scrollOffset: true,
						rect: true
					}, (data) => {
						res(data);
						console.log("1111111", res(data))
					}).exec();
				});
			},
			loadTabbars() {
				// this.loadNewsList('add');
				getpayMenthead()
				let tabList = _this.tabBars
				tabList.forEach(item => {
					item.newsList = [];
					item.loadMoreStatus = 0; //加载更多 0加载前，1加载中，2没有更多了
					item.refreshing = 0;
				})
				_this.tabBars = tabList;
				// this.loadNewsList('add');
			},
			goindependent() {
				uni.navigateTo({
					url: '/pages/village/my/independentPayement'
				})
			},
			gopayMentdetailds(e) {
				var order_id = e.currentTarget.dataset.order_id
				uni.navigateTo({
					url: '/pages/village/my/payMentdetailds?order_id=' + order_id
				})
			},
			gonewpaymentdetailds(type, bind_id, money) {
				console.log("tttttt", bind_id)
				console.log("tttttt", type)
				if (money == 0) {
					if (type == 'property') {
						uni.navigateTo({
							url: '/pages/village/my/lifepayment'
						})
					} else if (type == 'new_park') {
						uni.navigateTo({
							url: '/pages/village/smartPark/parkList'
						})
					} else {
						return false
					}

				} else {
					uni.navigateTo({
						url: '/pages/village/my/unpaidMentdetailds?type=' + type + '&bind_id=' + bind_id
					})
				}
			},
			goallpay() {
				getgoallpay()
			},
		},
		components: {
			uniSegmentedControl,
		},
	}
</script>

<style>
	page {
		background: rgb(245, 245, 245);
	}

	.container {
		margin: 0;
		padding: 0;
	}

	.tip_box_data {
		margin-top: 20rpx;
		background: #FFFFFF;
		display: flex;
		justify-content: flex-start;
		padding: 30rpx;
	}

	.check-box {
		padding-top: 10rpx;
	}

	.check-box1 {}

	.bigbox {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		width: 100%;
	}

	.contentbox {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.text {
		font-size: 30rpx;
		font-weight: 700;
		font-stretch: normal;
		line-height: 60rpx;
		letter-spacing: 0rpx;
		color: #333333;
	}

	.title {
		font-size: 24rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 60rpx;
		letter-spacing: -1rpx;
		color: #9aabbc;
	}

	.textnum {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.num {
		font-size: 28rpx;
		font-weight: 700;
		font-stretch: normal;
		line-height: 60rpx;
		letter-spacing: -1rpx;
		color: #ff6666;
		margin-right: 15rpx;
	}

	.tip_box_no_data {
		padding-top: calc((100vh - 170rpx - 288rpx - 21rpx)/2);
		font-size: 28rpx;
		text-align: center;
	}

	.tip_box_no_data .tip_title {
		width: 100%;
		text-align: center;
	}

	.right-icon {
		width: 30rpx;
		height: 30rpx;
	}

	.right-img {
		width: 100%;
		height: 100%;
	}

	.pay-bottom {
		position: fixed;
		width: 100%;
		height: 100rpx;
		background: #FFFFFF;
		bottom: 0;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.paybox {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.payminbox {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.allpay {
		width: 100rpx;
		font-size: 32rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 60rx;
		letter-spacing: -1rpx;
		color: #c7c7c7;
	}

	.allpaynum {
		width: 100%;
		font-size: 30rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 60rpx;
		letter-spacing: -1rpx;
		color: #2681f3;
	}

	.gopay {
		width: 400rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 100rpx;
		letter-spacing: -1rpx;
		background: #2681f3;
		color: #ffffff;
	}

	.cardbox {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-radius: 10rpx;
		margin: 30rpx;
		background: #FFFFFF;
		padding: 15rpx;
	}

	.cardbox:first-child {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-radius: 10rpx;
		margin: 0rpx 30rpx 30rpx 30rpx;
		background: #FFFFFF;
		padding: 15rpx;
	}

	.independent_payment {
		position: fixed;
		bottom: 165rpx;
		right: 24rpx;
		width: 102rpx;
		height: 102rpx;
		border-radius: 102rpx;
	}

	.independent-img {
		width: 100%;
		height: 100%;
		border-radius: 102rpx;
	}

	/* 顶部tabbar */
	.nav-bar {
		position: relative;
		z-index: 10;
		height: 90rpx;
		white-space: nowrap;
	}

	.nav-bar .nav-item {
		display: inline-block;
		height: 90rpx;
		text-align: center;
		line-height: 90rpx;
		font-size: 28rpx;
		color: #303133;
		position: relative;
		padding: 0 20rpx;
	}

	.nav-bar .nav-item:first-child {
		padding-left: 40rpx;
	}

	.nav-bar .nav-item:last-child {
		padding-right: 40rpx;
	}

	.nav-item:after {
		content: '';
		width: 0;
		height: 0;
		/* border-bottom: 4upx solid #007aff; */
		position: absolute;
		left: 50%;
		bottom: 0;
		transform: translateX(-50%);
		transition: 0.3s;
	}

	.nav-bar .current {
		color: #007aff;
	}

	.nav-bar .current::after {
		width: 50%;
	}



	/* .swiper-box {
		height: 1000rpx;
	} */

	.gopay_view {
		height: calc(100vh - 80rpx - 100rpx);
	}

	.paid_swiper {
		height: calc(100vh - 170rpx);
	}

	.panel-scroll-box {
		height: calc(100vh - 170rpx);
	}

	.no_data_img {
		width: 374rpx;
		height: 288rpx;
	}


	.swiper-box .panel-scroll-box .panel-item {
		background: #fff;
		padding: 30px 0;
		border-bottom: 2px solid #000;
	}

	/deep/.uni-scroll-view::-webkit-scrollbar {
		/* 隐藏滚动条，但依旧具备可以滚动的功能 */
		display: none
	}
</style>
